<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="theme-color" content="#3d3c53">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
    <title>登录</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/login.css">
    <link rel="stylesheet" href="../../css/style.css">

    <style type="text/css">
        .imgtest {
            margin: 10px 5px;
            overflow: hidden;
            text-align: center;
        }

        .list_ul figcaption p {
            font-size: 12px;
            color: #aaa;
        }

        .imgtest figure div {
            display: inline-block;
            margin: 5px auto;
            width: 100px;
            height: 100px;
            border-radius: 100px;
            border: 2px solid #fff;
            overflow: hidden;
            -webkit-box-shadow: 0 0 3px #ccc;
            box-shadow: 0 0 3px #ccc;
        }

        .imgtest img {
            width: 100%;
            min-height: 100%;
            text-align: center;
        }
    </style>

    <script>
        /**
         * YDUI 可伸缩布局方案
         * rem计算方式：设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem，32px = .32rem】
         */
        !function (window) {

            /* 设计图文档宽度 */
            var docWidth = 750;

            var doc = window.document,
                docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

            var recalc = (function refreshRem() {
                var clientWidth = docEl.getBoundingClientRect().width;

                /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
                docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';

                return refreshRem;
            })();

            /* 添加倍屏标识，安卓为1 */
            docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

            if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
                /* 添加IOS标识 */
                doc.documentElement.classList.add('ios');
                /* IOS8以上给html添加hairline样式，以便特殊处理 */
                if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
                    doc.documentElement.classList.add('hairline');
            }

            if (!doc.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);

        }(window);
    </script>
</head>
<body>

<div class="login-wrapper">
    <div class="login-wrapper-inner">
        <div class="imgtest">
            <figure>
                <div>
                    <img th:src="${headImg}"/>
                </div>
            </figure>
        </div>
<!--        <div class="wrapper-title-text" th:text="${nickName}"></div>-->
        <form class="form-submit-cont">
            <div class="form-group-wrapper">
                <div class="group-input-item">
                    <div class="Icon">
                        <i class="user-icon"></i>
                    </div>
                    <input type="hidden" name="uid" th:value="${uid}">
                    <div class="user-input">
                        <input type="text" name="username" placeholder="请输入学号">
                    </div>
                </div>
                <div class="group-input-item">
                    <div class="Icon">
                        <i class="pw-icon"></i>
                    </div>
                    <div class="user-input">
                        <input type="password" name="password" placeholder="请输入密码">
                    </div>
                </div>

                <h5 id="address"></h5>

            </div>
        </form>
        <div id="btn" class="form-group-btn">
            <button class="login-btn">登录</button>
        </div>
    </div>
</div>

<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../js/fastclick.js"></script>
<script src="../../js/layer.js"></script>
<script src="../../js/jssdk.js"></script>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=3ce9a1ca398bf74b5f6387efc75bab54&plugin=AMap.Geocoder"></script>
<script>

    var address = null;
    let uid = window.location.href.split("=")[1];
    $(function () {
        $.ajax({
            url: "/wechat/config?uid=" + uid,
            method: "get",
            success: function (data) {
                wx.config({
                    debug: false,
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['getLocation']
                });
            }
        });
    });

    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                $.ajax({
                    url: "/api/getAddress?longitude=" + longitude + "&latitude=" + latitude,
                    method: "get",
                    success: function (resp) {
                        address = resp;
                        document.getElementById("address").innerText = "当前定位：" + resp;
                        layer.open({
                            anim: 'scale',
                            content: '定位成功！'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        document.getElementById('btn').className = 'form-group-btn';
                    }
                });
            }
        });
    });

    wx.error(function (res) {
        alert("定位失败！请您打开手机定位尝试~")
    });

    document.getElementById('btn').className = 'form-group-btn-logining';

    layer.open({
        anim: 'scale',
        content: '正在获取当前定位。。。'
        , skin: 'msg'
        , time: 2 //2秒后自动关闭
    });


    $(".login-wrapper").on("click", ".form-group-btn", function () {

        document.getElementById('btn').className = 'form-group-btn-logining';

        layer.open({
            anim: 'scale',
            content: '正在登录，请稍后。。。'
            , skin: 'msg'
            , time: 4 //2秒后自动关闭
        });

        var d = {};
        var t = $('.form-submit-cont').serializeArray();
        $.each(t, function () {
            d[this.name] = this.value;
        });

        if (!d.username) {
            layer.open({
                anim: 'scale',
                content: '请输入账号'
                , skin: 'msg'
                , time: 3 //2秒后自动关闭
            });
        } else if (!d.password) {
            layer.open({
                content: '请输入密码'
                , skin: 'msg'
                , time: 3 //2秒后自动关闭
            });
        } else {
            var url = "/api/login";
            var urlData = {username: d.username, password: d.password, uid: d.uid, address: address}
            $.post(url, urlData, function (res) {

                if (res.message == "success") {
                    layer.open({
                        anim: 'scale',
                        content: '登录成功！3秒后自动关闭页面~'
                        , skin: 'msg'
                        , time: 3 //2秒后自动关闭
                    });
                    setTimeout(function () {
                        window.open("about:blank", "_self").close();
                    }, 3000);
                } else {
                    layer.open({
                        anim: 'scale',
                        content: '账号或密码错误！'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    document.getElementById('btn').className = 'form-group-btn';
                }
            }, "json");
        }
    })
</script>

</body>
</html>